import React from 'react';
import { withRouter } from 'react-router';
import { connect } from 'react-redux';
import  * as Request from '../../services/search/index';
import action from '../../store/actions/index';
import { Modal, Toast } from 'antd-mobile';
import config from '../../assets/js/conf/config';
import './index.css';

class SearchComponent extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            bHistory: true,
            aHotKeyWords: [],
            keywords: ''
        }
        this.aKeyWords = props.search.keywords;
    }

    componentDidMount(){
        this.isShowRecentSearch();
        this.getHotKeyWords();
    }

    /**是否显示最近搜索记录 */
    isShowRecentSearch(){
        const { keywords } = this.props.search;
        const flag = keywords.length > 0 ? true : false;
        this.setState({ bHistory: flag });
    }

    /**获取热门搜索记录 */
    getHotKeyWords(){
        Request.getHotKeyWords().then(res => {
            let keywords = res.code === 200 ? res.data : [];
            this.setState({ aHotKeyWords: keywords });
        });
    }

    //页面跳转
    goPage(url, keywords){
        const { isLocal } = this.props;
        if(isLocal && isLocal === '1'){
            this.props.childKeywords(keywords);
        }else{
            this.props.history.push(config.path+url);
        }
    }

    /**清除最近搜索 */
    cleanHistory(){
        Modal.alert('确认要删除吗?', '', [
            { text: '取消', onPress: () => {} },
            { text: '确认', onPress: () => { 
                localStorage.removeItem('hk');
                this.aKeyWords = [];
                this.props.dispatch(action.search.getKeywords({ keywords: this.aKeyWords }));
                this.setState({ bHistory: false });
            }},
        ]);
    }

    /**添加最近搜索关键词 */
    addHistoryKeyWords(){
        const keywords = this.state.keywords || this.props.searchKeywords;
        if(this.refs['keywords'].value === '') return Toast.info('请输入宝贝名称');
        if(this.aKeyWords.indexOf(keywords) === -1){
            this.aKeyWords.unshift(keywords);
        }
        localStorage['hk'] = JSON.stringify(this.aKeyWords);
        this.setState({ bHistory: true });
        this.props.dispatch(action.search.getKeywords({ keywords: this.aKeyWords }));
        this.goPage('goods/search?keywords='+keywords, keywords);
    }

    render() {
        const { bHistory, aHotKeyWords } = this.state;
        const lateKeyWords = this.props.search.keywords;
        return (
            <div className='page'>
                <div className='search-header'>
                    <div className='close' onClick={() => this.props.closeSearch()}></div>
                    <div className='search-wrap'>
                        <div className='search-input-wrap'>
                            <input type='text' ref='keywords' className='search-input' defaultValue={this.props.searchKeywords} onChange={(e) => this.setState({ keywords: e.target.value })} placeholder='请输入宝贝名称' />
                        </div>
                        <button type='button' className='search-btn' onClick={() => this.addHistoryKeyWords()}></button>
                    </div>
                </div>
                <div className={bHistory ? 'search-main' : 'search-main hide'}>
                    <div className='search-title-wrap'>
                        <div className='search-title'>最近搜索</div>
                        <div className='bin' onClick={() => this.cleanHistory()}></div>
                    </div>
                    <div className='search-keywords-wrap'>
                        {lateKeyWords && lateKeyWords.length > 0 ? lateKeyWords.map((item,index) => {
                            return (
                                <div key={index} className='keywords' onClick={() => this.goPage('goods/search?keywords='+item, item)}>{item}</div>
                            )
                        }) : ''}
                    </div>
                </div>
                <div className='search-main'>
                    <div className='search-title-wrap'>
                        <div className='search-title'>热门搜索</div>
                    </div>
                    <div className='search-keywords-wrap'>
                        {aHotKeyWords && aHotKeyWords.length > 0 ? aHotKeyWords.map((item,index) => {
                            return (
                                <div key={index} className='keywords' onClick={() => this.goPage('goods/search?keywords='+item.title, item.title)}>{item.title}</div>
                            )
                        }) : ''}
                    </div>
                </div>
            </div>
        )
    }
}

export default connect((store) => {
    return (
        store
    )
})(withRouter(SearchComponent));
